<template>
  <div class="Feedback">
    <c-title :hide="false" text="意见反馈">
      <template #edit>
        <i class="iconfont icon-duihuanjilu" @click="toFeedbackRecord"></i>
      </template>
    </c-title>
    <div class="Feedback_conten">
      <div class="Feedback_conten_txt">温馨提示：</div>
      <div class="Feedback_conten_desc">温馨提示内容温馨提示内容温馨提示内容温馨提示内容温馨提示内容温馨提示内容</div>
    </div>
    <div class="feedback_class">
      <van-cell title="功能使用意见分类" is-link :value="classKeyword" />
    </div>
    <div class="Feedback_conten Feedback_conten_des">
      <div class="Feedback_conten_txt">意见内容与凭证:</div>
      <van-field v-model="value" type="textarea" :border="false" show-word-limit maxlength="300" placeholder="请填写功能建议" input-align="left" />
      <div class="imgList">
        <div class="showimg">
          <div class="showimg_box" v-for="(item, index) in 3" :key="index">
            <img :src="item" alt="" />
          </div>
          <div class="uploadBox">
            <div class="uploadTapBox">
              <van-uploader :after-read="afterRead" />
            </div>
            <i class="iconfont icon-icon_add"></i>
            <span class="uploadBox_txt">选择图片</span>
          </div>
        </div>
      </div>
    </div>
    <div class="feedback_phone_box">
      <van-field v-model="feedback_phone" label="联系电话" placeholder="请输入用户名" />
    </div>
    <div class="pos_btn"><div class="btn">提交</div></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      classKeyword: "请选择",
      feedback_phone: ""
    };
  },
  methods: {
    toFeedbackRecord() {
      this.$router.push(this.fun.getUrl("Feedback_record", {}));
    }
  }
};
</script>
<style lang="scss" scoped>
.Feedback {
  padding-bottom: 4rem;
  .pos_btn {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0rem -0.03rem 0.31rem 0.03rem #f5f5f5;
    padding: 0.63rem 0.75rem;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    .btn {
      height: 2.5rem;
      background: #f15353;
      border-radius: 1.28rem;
      line-height: 2.5rem;
      color: #ffffff;
    }
  }
}
.feedback_phone_box {
  background: #ffffff;
  border-radius: 0.5rem;
  margin: 0.63rem 0.75rem;
  .van-cell {
    border-radius: 0.5rem;
  }
}
.Feedback_conten {
  margin: 0.63rem 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.94rem 0.63rem;
  box-sizing: border-box;
  .van-cell {
    padding: 0;
  }
  .Feedback_conten_txt {
    font-weight: 500;
    font-size: 0.94rem;
    margin-bottom: 0.81rem;
    text-align: left;
  }
  .Feedback_conten_desc {
    font-size: 0.81rem;
    color: #00001c;
    text-align: left;
  }
}
.Feedback_conten_des {
  .van-cell {
    background: #f8f8f8;
    padding: 0.75rem 0.6rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
  }
}
.feedback_class {
  margin: 0.63rem 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  .van-cell {
    border-radius: 0.5rem;
    text-align: left;
  }
}
.imgList {
  margin-top: 0.66rem;
  .showimg {
    display: flex;
    flex-wrap: wrap;
    .showimg_box {
      margin-bottom: 0.63rem;
      margin-right: 0.3rem;
    }
    img {
      width: 6.56rem;
      height: 6.56rem;
      border-radius: 0.5rem;
    }
  }
}
.uploadBox {
  width: 6.56rem;
  height: 6.56rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  border-radius: 0.5rem;
  position: relative;
  .uploadTapBox {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .icon-icon_add {
    font-size: 1.1rem;
    color: #d6d6dc;
  }
  .uploadBox_txt {
    margin-top: 0.63rem;
    font-size: 0.75rem;
    color: #aaaab3;
  }
}
</style>